<template>
    <div class="goodNight-time">
             <div class="carousel-title-A">
                <span class="selection-broadcasts">晚安时刻</span> 
                <span class="mores">更多</span> 
            </div>
        <div>
               <van-swipe :loop="false" :show-indicators="false" :width="150" :height="200">
                <van-swipe-item>
                    <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p2.music.126.net/g2_Gv0dtAicJ3ChTYu28_g==/1393081239628722.jpg?param=140y140">
                                    <p>“深度睡眠 |重度失眠者专用歌单</p>
                            </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg?param=140y140">
                                    <p>“冷爵士让你全身心放松</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p2.music.126.net/ndGlV_dfHvAonoDr5SL3XA==/109951164247329551.jpg?param=140y140">
                                    <p>“公路音乐|纵情追逐梦想与远方</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/UC7yqRPeTH1crQlsXvNgmQ==/109951164295804843.jpg?param=140y140">
                                    <p>“日系治愈：无法抗拒的温柔男声</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/kzt5CaQv9Fk3XIiQr5Ubeg==/109951165289612523.jpg?param=140y140">
                                    <p>“莱茵河畔之风拂过心田</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p2.music.126.net/hJ7BusQL_JncbFzmsCPE7g==/3394192398200725.jpg?param=140y140">
                                    <p>“清新治愈｜干净 温柔宝藏</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p4.music.126.net/FfonZdsWRYlRX5CzMOG__w==/7942871999127483.jpg?param=200y200">
                                    <p>“治疗焦虑症的良药</p>
                            </div>
                    </div>
                </van-swipe-item>
               <van-swipe-item class="swipe-item-last"></van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script>
export default{
         data(){
            return {
                carouselData:[
                    {
                        imgUrl:'/src/images/p1.jpg',
                        description:'陪你入睡'
                    },
                     {
                        imgUrl:'/src/images/p2.jpg',
                        description:'倾诉和分享者' 
                    }, {
                        imgUrl:'/src/images/p3.jpg',
                        description:'催眠小故事'
                    }, {
                        imgUrl:'/src/images/p4.jpg',
                        description:'心理FM主播'
                    }, {
                        imgUrl:'/src/images/p5.jpg',
                        description:'心理FM主播'
                    }, {
                        imgUrl:'/src/images/p6.jpg',
                        description:'唱跳rap🏀Music'
                    }, {
                        imgUrl:'/src/images/p7.png',
                        description:'天使与你同在，你本来就很美'
                    }, {
                        imgUrl:'/src/images/p2.jpg',
                        description:'洗涤你的心灵'
                    },
                ]
            }
         }
    }
</script>


<style scoped>
.carousel-title-A{
    margin-top:10px;
    width: 100%;
    height:50px;
}
.selection-broadcasts{
     float: left;
    margin-left: calc(50% - 30px);
    font-size:15px;
    font-weight: bold;
    line-height:50px;
}
.mores{
    font-size:12px;
    line-height:50px;
    color:gray;
    float:right;
    margin-right: 15px;
}

.van-swipe-item{
     margin-left:5px;
     margin-right:5px;
}
.carousel-item img{
    width: 150px;
    height: 150px;
}
.carousel-item p{
    font-size:13px;
}
.swipe-item-last{
    border:none;
}
.goodNight-time{
    margin-bottom:100px;
}
</style>
